<template>
  <n-spin size="large" :show="showSpin">
    <div class="clusterStat" v-if="selectedRow">
      <div class="cs-left">
        <n-data-table
            :columns="csCol"
            :data="GetCSTableData()"
            :bordered="false"
            class="cs-table"
            @update:checked-row-keys="handleCheck"
            :row-key="row => row.id"
            :default-checked-row-keys="defaultCheckedRow"
        />
        <n-button>+ New</n-button>
      </div>
      <div class="cs-right" >
        <div v-for="(item, index) in Object.keys(selectedRow.cluster_info.status)" :key="item">
          <div class="cs-right--subtitle">
            <span>{{item.toUpperCase()}}</span>
            <span>{{ GetTitleData(item, index) }}</span>
          </div>
          <n-progress :color="GetPGData(item)>=50?'#FBBD23':'#36D399'" :percentage="GetPGData(item)" :indicator-placement="'inside'" processing/>
        </div>
      </div>
    </div>
  </n-spin>
</template>

<script setup>
import { NDataTable, NButton, NProgress, NSpin } from 'naive-ui'
import {reactive, ref, onMounted, h} from "vue";
import fiatBE from "@/api/fiatBE";
// import dayjs from "dayjs";
const clusters = reactive([])
const csCol = [
  {type: 'selection',multiple: false},
  {title: 'id',key: 'id'},
  {title: 'name',key: 'name'},
  {
    title: 'dashboard',
    key: 'dashboard',
    render(row) {
      return h(
          'a',
          {
            href: row.dashboard,
            style: {
              color: 'black'
            }
          },
          {
            default: () => row.dashboard
          }
      )
    }
  }
]

let defaultCheckedRow = reactive([''])
let selectedRow = ref(null)
function handleCheck(e) {
  clusters.forEach(c => {
    if(c.id === e[0]) selectedRow.value = c
  })
}

function GetPGData(i) {
  if(selectedRow) {
    let s = selectedRow.value.cluster_info.status[i]
    return (s.used / s.total * 100 ). toFixed(1)
  } else {
    return 0
  }

}
function GetTitleData(i, index) {
  let s = selectedRow.value.cluster_info.status[i]
  return `${s.total} ${index===0?'Cores':index===1?'GBi':'Card(s)'}`
}
function GetCSTableData() {
  return clusters.map(c => {
    return {
      id: c.id, name:c.cluster_info.name, dashboard:`${c.cluster_info.host}:${c.cluster_info.dashboard_port}`
    }
  })
}

let showSpin = ref(true)
onMounted(() => {
  fiatBE.get('/cluster/fetch').then(res => {
    clusters.push(...res.data)
    selectedRow.value = clusters[0]
    defaultCheckedRow[0] = clusters[0].id
    showSpin.value = false
  })
})

</script>

<style scoped>
.clusterStat {
  display: flex;
  align-items: center;
}
.cs-left {
  text-align: right;
}
.cs-table {
  margin: 20px 0;
}
.cs-right {
  width: 40%;
  margin-left: 5%;
  margin-top: -26px;
}
.cs-right--subtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.cs-right--subtitle span:first-child {
  font-weight: bold;
}
.cs-right--subtitle span:last-child {
  background-color: rgb(61,68,81);
  color: white;
  padding: 0 6px;
  border-radius: 16px;
}
</style>
